<template>
	<div class = "list" ref = "wrapper">
		<div class = "content">
			<h2>您的位置</h2>
			<div class = "city">
				<div class = "buttonWrap">
					<input type="button" :value = "doubleCity" class = "currentCity">
				</div>
			</div>
			<h2>热门城市</h2>
			<div class = "city">
				<div class = "buttonWrap" v-for = "item of hotCities" :key = "item.id">
					<input type="button" :value = "item.name" @click = "chooseCity(item.name)">
				</div>
			</div>
			<ul>
				<li v-for = "(item,key) in cities" :key = "key">
					<h3 :id = "key" :ref = "key">{{key}}</h3>
					<ul class = "cities">
						<li class = "border-bottom" v-for = "city of item" :key = "city.id" @click = "chooseCity(city.name)">{{city.name}}</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	import Bscroll from "better-scroll"
	import { mapState,mapMutations,mapGetters } from 'vuex'
	export default {
		name : 'list',
		props : ["cities","hotCities","letter"],
		watch : {
			letter () {
				if(this.letter){
					const element = this.$refs[this.letter][0];
					this.scroll.scrollToElement(element)
				}
			}
		},
		methods : {
			...mapMutations(["changeCity"]),
			chooseCity (city) {
 				this.changeCity(city)
				this.$router.push("/");
			}
		},
		computed : {
			...mapState({
				"currentCity" : "city"
			}),
			...mapGetters(["doubleCity"])
		},
		mounted () {
			this.scroll = new Bscroll(this.$refs.wrapper,{
				click:true
			})
		},
	}
</script>

<style lang = "less" scoped>
	@import '~css/variable.less';
	.list {
		font-size:.24rem;
		position: absolute;
		top:1.58rem;
		left:0;
		right:0;
		bottom:0;
		overflow:hidden;
		h2,h3 {
			padding: .24rem .3rem;
			background:#F5F5F5;
		}
		.city {
			padding:.1rem .5rem .1rem .3rem;
			box-sizing: border-box;
			overflow: hidden;
			.buttonWrap {
				width:33.33%;
				padding:.1rem;
				box-sizing: border-box;
				float:left;
				input {
					color:#212121;
					width:100%;
					padding:.06rem 0;
					background-color:transparent;
					border:1px solid #ccc;
					border-radius:.1rem;
					&.currentCity {
						color:@bgColor;
						border:1px solid @bgColor;
					}
				}
			}
		}
		.cities {
			li {
				padding:.2rem;
			}
		}
	}
</style>